Alpha Anywhere 4.4 Videos
This is a list of vidoes published for Alpha Anywhere 4.4.0 through Alpha Anywhere 4.4.5.
Alpha Anywhere 4.4.0
| Category | Title | Description |
|---|---|---|
| UX Component | Alignment Container | The Alignment Container makes it easy to Left, Center or Right align a series of control on a UX.
Watch Video Date added: 2017-02-02 |
| Xbasic | Using Xbasic Classes in Server-side code | You can define Xbasic classes in your project and then use those classes in any server-side Xbasic code.
In this video we show how an Xbasic class definition can be added to a web project and then used in the server-side code that executes when an Ajax callback is made. Watch Video Download Components Date added: 2017-02-11 |
| UX Component - Map Control | Adding Multiple Markers to a Map Control using Client-side Data | Action Javascript has an action to add multiple markers to a map. The data that defines the latitude/longitude
for each marker on the map (and also for the marker titles, details etc). can either come from server-side
data, or from client-side data.
In the case of server-side data you specify the name of a Data Series that specifies the properties for each marker. In this video we show how to configure the Action Javascript 'Add multiple markers to a map' action to use client-side data. This client-side data can come from a Javascript function, a List control, the client-side Data Cache, or, in the case of a PhoneGap application, by querying a SQLite database on a device. Watch Video Download Component Date added: 2017-02-12 |
| UX Component - FormView Control | Lookup Fields | When you create a FormView control, you might want to display 'friendly' values for some of the fields in
the form. For example, you might want to display the Product Name, rather than the Product Id.
In this video we show how you specify a lookup for any field in the Form View control. Watch Video Download Components Date added: 2017-02-14 |
| UX Component - PhoneGap | Using the CLI (Command Line Interface) to Build PhoneGap Applications instead of PhoneGap Build | When you build a PhoneGap application from a UX component that you have built, the easiest approach is to
use the Adobe PhoneGap Build service. Direct integration with PhoneGap Build is built into the Alpha
Anywhere IDE. While the advantages of using PhoneGap Build are clear - no software to install on your
PC, and ability to build apps for iOS on your Windows machine - there are also disadvantages. These include
having to wait an uncertain amount of time before PhoneGap Build finishes the build (wait time depends
on how busy the service is) and inability to use certain plugins not supported by PhoneGap Build.
Another way in which PhoneGap applications can be built is by using the PhoneGap CLI (Command Line Interface). When you use the CLI, you are not restricted to only the plugins supported by PhoneGap build. The disadvantage of the CLI approach is that you will first have to install the CLI tools and platform SDKs on your machine. You will also need a Mac to build for iOS. In this video we give an overview of using the CLI. Watch Video See documentation Date added: 2017-02-18 |
| UX Component | Using 3rd Party jQuery Libraries in Control Javascript | The UX Builder allows you to define 'Control Javascript' which allows you to easily configure a UX control
to use a jQuery controls (such as a date or time picker). However, in the case where the jQuery control
is defined in a linked file, you can run into timing issues that result because the control javascript
is executed before the linked jQuery file has loaded.
This video describes how you can resolve these timing issues. Addendum: In the video we show that the control javascript function is created using the syntax: var clockpicker = function() This should be changed to window.clockpicker = function() Watch Video Date added: 2017-02-19 |
| TabbedUI | Adding a Search Feature to the TabbedUI | It is not uncommon for developers to create TabbedUI components with a very large number of items. Users
may then struggle to find a particular item in the list of available menu items. Adding a search feature
to the TabbedUI component makes it very easy for users to find the menu item they want.
In this video we show how the search feature is added to the TabbedUI component. Watch Video Date added: 2017-02-24 |
| Reports | Using SQL Server Reporting Services Reports in an Alpha Anywhere Project | Many organizations who use SQL Server also use SQL Server Reporting Services (SSRS). Using reports created
in SSRS in an Alpha Anywhere project is possible.
In this video we show how reports defined in SSRS can be used in Alpha Anywhere applications. Watch Video Date added: 2017-02-25 |
| Node | Calling a Node Service that Returns Binary Data | When you call a Node service from Xbasic, the service can return both text and binary data.
In this video we show how a Node Service can return binary data. Watch Video Date added: 2017-02-28 |
| UX Component | Running Asynchronous Functions Synchronously | Many Javascript functions in an application are asynchronous. For example, functions that make Ajax callbacks
are asynchronous and many PhoneGap functions are also asynchronous. Often you will want to call several
asynchronous functions, but you want to execute the functions synchronously. For example, you do not
want to call the second function until the first function has completed.
Javascript Promises are typically used to run asynchronous code synchronously. But Promises can be hard to understand and it can be tricky to restructure your code to use Promises. The Alpha Anywhere Javascript library has a function called A5.runChain() that provide an easy way to run asynchronous functions synchronously. Also, minimal changes need be made to your function definitions to make them suitable for use with the A5.runChain() function. In this video we show how the A5.runChain() function is used. Watch Video Date added: 2017-03-04 |
| UX Component | Semi-circular Number Display Control | The semi-circular number display control displays the value of a number on a semi-circular chart. It is ideal
for dashboard type applications.
This video shows how you can add a semi-circular number display control to a UX component and how you can configure the component. Watch Video Download Component Date added: 2017-03-04 |
| UX and Grid Component | Code Glossary | The code glossary is a great timesaver when editing Xbasic and Javascript code.
In this video we show how to use the code glossary in the editors. Watch Video Date added: 2017-03-17 |
| UX Component - Javascript Charts | Introduction | Javascript Charts allow you to create a variety of different chart types using Javascript. Because the charts
are created client-side, using Javascript, these types of charts are ideal for disconnected applications
where the Chart control cannot be used (as this control type produces charts server-side).
In this video we show how to set up a basic Javascript Charts. Watch Video Date added: 2017-03-26 |
| UX Component - Javascript Charts | Binding Chart Data to a Javascript Function | The data shown in a Javascript Chart can be obtained by calling a Javascript function.
in this video show show how to bind the Chart data to a Javascript function. Watch Video Download Component Date added: 2017-03-26 |
| UX Component - Javascript Charts | Binding Chart Data to Data From a SQL Database - Using a Data Series for Chart Data | The data shown in a Javascript Chart can be obtained by querying a SQL database.
In this video show show how to bind the Chart data to data from a SQL database table by binding the Chart data to the data in a Data Series. The Data Series is populated with data from a SQL database table. Watch Video Date added: 2017-03-26 |
| UX Component - Javascript Charts | Binding Chart Properties to a Javascript Function | Any property of a chart can be made dynamic by binding the property to the result of a Javascript function.
In this video we show how properties of the Chart (in addition to the Chart data) can be made dynamic. Watch Video Download Component Date added: 2017-03-26 |
| UX Component - Javascript Charts | Action Scripting Methods for Working With Javascript Charts | Action Scripting exposes several methods for working with Javascript Charts.
In this video we show how you can use Action Scripting to resize a Javascript Chart. Watch Video Download Component Date added: 2017-03-26 |
| UX Component - Javascript Charts | Action Scripting - Setting a Chart Property Using Action Scripting vs. Binding a Chart Property to a Javascript Function | Action Scripting allows you to dynamically change properties (such as the Chart colors, or title) after the
Chart has been rendered. However, you can also achieve the same result by binding the Chart properties
to Javascript functions.
In this video we contrast the two methods for setting Chart properties. Watch Video Download Component Date added: 2017-03-26 |
| UX Component - Javascript Charts | Using Action Scripting to Refresh Chart Data | Action Scripting allows you to refresh the data shown in a Chart. If the Chart data is based on a Data Series,
an Ajax callback to the server will be made to refresh the data in the Data Series on which the Chart
depends and then the Chart will be redrawn, showing the new data.
In this video we show how Action Scripting is used to refresh the Chart data. Watch Video Date added: 2017-03-26 |
| UX Component - Javascript Charts | In Depth Example - Chart Based on SQL Data | This example shows a pie chart whose data is obtained from a multi-table SQL query against the sample Northwind
database. The Chart is based on a custom Data Series to generate the Chart data. The user can select
the country for which the Chart should be shown from a dropdownbox control.
In this video we show how this Chart is set up. Watch Video Download Component Date added: 2017-03-26 |
| UX Component - Javascript Charts | Understanding the Structure of the Javascript that Defines a Javascript Chart | The Javascript used to define a Javascript Chart has a well defined structure, described in this video.
Watch Video Date added: 2017-03-26 |
| UX Component - Javascript Charts | Javascript Chart Events | In this example we show a Chart with a Tooltip event. After the Chart is resized, the Tooltip events must
be re-registered.
Watch Video Download Component Date added: 2017-03-26 |
Alpha Anywhere 4.4.1
| Category | Title | Description |
|---|---|---|
| UX Component - List Control | Showing Content in Row When Row Is Selected | A common use case with the List is to only show certain content in each List row when the row is selected.
This is easily done using CSS.
In this video we show how this is achieved. Watch Video Download Component Date added: 2017-03-26 |
Alpha Anywhere 4.4.4
| Category | Title | Description |
|---|---|---|
| AlphaLaunch | Publishing Apps to a Device using AlphaLaunch | Publishing Apps to an App store (especially the Apple App store) can be a time consuming and frustrating
experience. Using AlphaLaunch you can quickly and easily publish Apps to Apple and Android devices, completely
bypassing the App stores.
In this video we show how you can publish an App to a device using AlphaLaunch Watch Video Date added: 2017-03-26 |
| UX Component | Mobile Applications with Persistent Logins | A common pattern in mobile applications is to not require the user to login to the application after they
have successfully logged in for the first time. The login should be persistent until is is explicitly
revoked by the action of an Administrator, or until the end of the persistent login period is reached.
Unlike a traditional Web application built using the Alpha Security Framework, the user will not have to log in again once their session expires, or when they restart the application. In this video we show how this pattern is achieved. (Requires build 4307 or above.) Watch Video Download Component Date added: 2017-04-29 |
| UX Component - ViewBox Control | Get Data for Current Row in ViewBox | A common use case for a ViewBox is a light weight alternative to the List control. In a List control it is
easy to get the data for the row that the user clicked on.
In this video we show how a ViewBox that is configured to display a list of data can be configured so that the data for the row that was clicked on can be obtained. Watch Video Download Component Date added: 2017-05-14 |
Alpha Anywhere 4.4.5
| Category | Title | Description |
|---|---|---|
| UX Component - List Control | Lazy Image Loading | A common use case for Lazy Image Loading is when you have a List that displays images that are sourced from
a server. If the List has a large number of rows, fetching all of the images from the server will slow
down the initial render of the List. However, by implementing Lazy Image Loading, only the images for
the rows that are currently scrolled into view will be fetched.
You can set a wait time that the List will wait after a row comes into view before the images for the visible rows will be fetched. This prevents fetching images for rows that you scroll past without stopping on. When a row that displays an image that has not yet been fetched is displayed, a 'waiting' image will be displayed. Once the image has been fetched, the 'waiting' image will be replaced with the real image. In this video we show how to configure a List control to use Lazy Image Loading. Watch Video Download Component Date added: 2017-05-25 |
| UX Component - ControlBar Control | Dynamically Styling Items on a ControlBar | A common requirement when using ControlBars is to dynamically style the items on a ControlBar. For example,
you might want some text to be red under one condition and green under another condition.
In this video we show how client side templating directives (e.g. {*if} ...{*endif} can be used to define dynamic styles and classes. Watch Video Download Component Date added: 2017-06-09 |
| UX Component - ControlBar Control | Showing a List Control in a ControlBar Disclosure | A powerful feature of the ControlBar is its ability to display 'disclosures' (i.e. windows). These disclosures
can be animated into view from various positions on the screen. A common requirement is to show a List
control in a disclosure.
This video shows how this can be done. Watch Video Download Component Date added: 2017-06-18 |
| UX Component - FormView Control | Review of Different Field Editors | Fields in the FormView control are edited using Field Editors. You can build your own Field Editors, or chose
from the collection of built-in Field Editors.
In this video we review the different built-in Field Editors that are available as of Build 4192. Watch Video Download Component Date added: 2017-06-25 |
| UX Component - FormView Control | Displaying Data from Hierarchical Lists in a FormView Control | (This video is aimed at advanced users of the FormView control).
The FormView control can display data from multiple Lists that are linked in an hierarchical relationship. E.g. A Customer List with a child Orders List. By default, when the FormView displays data for a selected row in the parent (i.e. Customer) List, it will display ALL of the data from the children of the selected row. In other words, the FormView control will display data for the selected customer in the Customer List and it will show ALL of the orders for the selected Customer. However, in some applications, you might want to display only the data for the selected Order in the Orders List. In other words, the FormView control should use BOTH the parent (i.e. Customer) List and the child (i.e. Orders) List as selectors for the data that should be shown in the FormView control. In this video we show how the FormView control is configured to show just the data from the selected row in the child (i.e. Orders) List. Note: Another way to achieve this result would have been to use two separate FormView controls - one for the Customer List and one for the Orders List. Watch Video Download Component Date added: 2017-06-26 |
| UX Component | Introduction to Style 'Tweaks' | In order to change the appearance of a UX component you can either edit the stylesheet or you can 'tweak'
the style.
In this video we show how you can tweak the style to change the colors in the stylesheet and also how you can add a new button sub-theme. Watch Video Date added: 2017-07-05 |
| UX Component - FormView Control | Displaying Editors in a Pop-up Window | The typical pattern in a mobile UX component that uses the FormView control is to place the editors in their
own PanelCard that is animated into view when the user taps on a field in the form to edit its value.
However if you are using a FormView control in a web application, you might prefer the editors to be shown in a pop-up window next to the field you are editing. In this video we show how the editors used in a FormView control can be opened in a drop-down window relative to the form field you are editing. Watch Video Download Component Date added: 2017-07-05 |
| UX Component - List Control | Injecting Arbitrary Headers and Footers into List Data | You can inject arbitrary HTML into the List. This can be used to add headers and footers into the List as
shown in this video.
Watch Video Download Component Download Component - collapsible headers Date added: 2017-07-12 |
| UX Component - Multi-select Tokens Control | Adding a Multi-select Tokens Control to a UX Component | The Multi-select Tokens control operates much like the Gmail app when you address an e-mail to multiple recipients.
You can type values into a control, or make selections from a drop-down choice list. Each selection is
shown in the control as a 'token'. Tokens can be removed from the list of selections by either
hitting the backspace key while focus is in the control, or by clicking on the 'delete' icon
in the token.
A common use case for the Multi-select Tokens control is to define selection criteria for a List control. In this video we show how a Multi-select Tokens control is used to select a list of countries. The List control is then filtered to show the countries that match the selected tokens. For example, if tokens for 'USA' and 'UK' are selected, the List is filtered to show customers in either 'USA' or 'UK' Watch Video Download Component Date added: 2017-07-23 |
| UX Component | Data-driven Forms | A data-driven form is a form whose fields are determined at run-time (typically by querying a database) to
get a list of the fields to display in the form.
In this video we show how a ViewBox control and an Editor Set with multiple Editors can be used to implement a data driven form. Watch Video Download component Date added: 2017-07-26 |